<template>
  <div>
    <div class="box">
      <div class="leftImg">
        <el-image lazy :src="imgUrl" fit="scale-down"></el-image>
      </div>
      <!-- 热门50首 -->
      <div>
        <div class="titleBox">
          <div class="title">热门50首</div>
        </div>
        <div>
          <el-table :data="songsData" style="width: 100%" size="medium" stripe :row-class-name="tableRowClassName"
            :row-style="selectedstyle" :show-header="false" @row-click="play" @row-contextmenu="rightList">
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="name" width="400px"></el-table-column>
            <el-table-column prop="dt">
              <template slot-scope="scope">
                {{ Math.floor(scope.row.dt / 1000) | timeFormat }}
              </template>
            </el-table-column>
          </el-table>
          <div class="more" @click="more()" v-if="show === true">
            查看全部{{ songs.length }}首
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div class="btnTitle">专辑</div>
    <!-- 专辑区域 -->
    <div class="content">
      <div v-for="(item, i) in hotAlbums" :key="i" class="contentBox">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <el-image lazy :src="item.blurPicUrl" @click="getItem(item.id)">
            <div slot="placeholder" class="image-slot">
              <el-image src="https://s4.music.126.net/style/web2/img/default/default_album.jpg"
                @click="getItem(item.id)" lazy></el-image>
            </div>
          </el-image>
          <div style="padding: 14px">
            <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
              <div class="desc">
                {{ item.name }}
              </div>
            </el-tooltip>
          </div>
        </el-card>
      </div>
    </div>
    <div class="more" @click="load()" v-if="show === true">
      查看更多 <i class="el-icon-arrow-down"></i>
    </div>
    <div class="loading" v-if="loading === true">
      <i class="el-icon-loading"></i>
    </div>

    <Memu />
  </div>
</template>

<script>
import imgUrl from '../../assets/image/hot50.jpg';
import { mapState, mapActions } from 'vuex';
import debounce from "@/utils/debounce.js";
export default {
  components: {
    Memu: () => import('../../components/rightMemu.vue'),
  },
  mounted() {
    this.id = window.sessionStorage.getItem('artists');
    this.getTopSong();
    this.getAlbum();
    if (this.nowPlaySong !== null) {
      this.songId = this.nowPlaySong.songId;
    }
  },
  computed: {
    ...mapState(['nowPlaySong', 'preSong']),
  },
  watch: {
    preSong(newVal, oldVal) {
      this.getIndex = newVal.preSong;
      this.play(this.songsData[this.getIndex]);
    },
    nowPlaySong(newVal, oldVal) {
      this.songId = newVal.songId;
    },
  },

  data() {
    return {
      id: null,
      songs: [],
      songsData: null,
      getIndex: '',
      ifMore: false,
      length: 0,
      show: true,
      limit: 50,
      offset: 0,
      hotAlbums: null,
      imgUrl,
      show: false,
      loading: false,
      songId: '',
      row: null,
      rightShow: false,
    };
  },
  methods: {
    ...mapActions([
      'saveNowSongCount',
      'saveAlbumData',
      'saveNowSong',
      'saveSong',
      'clickPlay',
      'saveNowId',
      'saveNowRow',
    ]),
    // 获取热门50首
    async getTopSong() {
      this.songs = [];
      this.songsData = null;
      this.$api.topSong({ id: this.id, cookie: localStorage.getItem('cookie') }).then((ret) => {
        this.saveSong({ songs: ret.songs });
        this.songs = ret.songs;
        this.length = this.songs.length;
        this.songsData = this.songs.slice(0, 10);
        this.clickPlay({ ifPlay: true });
      });
    },

    getAlbum: debounce(function () {
      // 默认取出50
      this.$api
        .getAlbum({ id: this.id, limit: this.limit, offset: this.offset, cookie: localStorage.getItem('cookie') })
        .then((ret) => {
          this.hotAlbums = ret.hotAlbums;
          this.show = ret.more;
        });
    }, 1000),

    // 查看更多
    more() {
      this.songsData = this.songs;
      this.show = false;
    },
    // 查看更多专辑
    load() {
      this.offset += 1;
      if (this.show === true) {
        this.offset += 1;
        this.limit = this.offset * 50;
        this.getAlbum()
      }
    },

    // 歌曲的播放
    play(row) {
      const e = localStorage.getItem('cookie');
      this.getIndex = row.row_index;
      const title = row.name;
      const arr = row.ar.map((item) => {
        return item.name;
      });
      const artist = arr.join();
      const pic = row.al.picUrl;
      this.songId = row.id;
      this.$api.songUrl({ cookie: e, id: row.id, cookie: localStorage.getItem('cookie') }).then((ret) => {
        if (ret.data[0].url !== null) {
          this.saveNowSong({
            id: this.getIndex,
            title,
            artist,
            src: ret.data[0].url,
            pic,
            songId: this.songId,
          });
          this.saveNowSongCount({
            nowSongCount: this.songsData,
          });
          this.$api.scrobble({ id: this.songId, cookie: e, sourceid: row.al.id, timestamp: this.$utils.timestamp() })
          this.clickPlay({ ifPlay: false });
        } else {
          this.$message.error('该歌曲暂时无法播放!!!');
        }
      });
    },

    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex;
    },

    // 设置行的颜色
    selectedstyle({ row, rowIndex }) {
      if (this.songId === row.id) {
        return {
          color: '#ec4141',
        };
      }
    },

    // 右键菜单
    rightList(row, column, event) {
      window.sessionStorage.setItem('getIndex', this.getIndex);
      this.row = row
      this.saveNowRow({ nowRow: this.row })
      this.rightShow = true
      document.querySelector('.list').style.left = `${event.clientX}px`
      document.querySelector('.list').style.top = `${event.pageY}px`
      const top = parseInt(document.querySelector('.list').style.top)
      const height = document.querySelector('.list').offsetHeight
      if (top + height >= event.screenY) {
        document.querySelector('.list').style.top = `${event.screenY - height - 60}px`
      }
    },

    // 获取到歌单的详情
    async getItem(e) {
      this.loading = true;
      this.$api.album({ id: e, cookie: localStorage.getItem('cookie') }).then((ret) => {
        window.sessionStorage.setItem('album', e);
        // 存入专辑明细
        this.saveAlbumData({ albumData: ret });
        this.$router.push(`/albumPage?id=${e}`);
      });
    },

  },
};
</script>

<style scoped>
.box {
  display: flex;
  margin-bottom: 10px;
}

.leftImg {
  height: 200px;
  width: 200px;
  margin-right: 50px;
}

.leftImg .el-image {
  height: 200px;
  width: 200px;
}

.titleBox {
  display: flex;
}

.el-card {
  margin-bottom: 10px;
  cursor: pointer;
  width: 200px;
  position: relative;
}

.el-card .el-image {
  width: 200px;
  height: 200px;
}

.title {
  margin-right: 10px;
}

.el-icon-video-play {
  font-size: 20px;
  margin-right: 5px;
}

.el-icon-folder-add {
  font-size: 20px;
}

.more {
  cursor: pointer;
  margin-top: 10px;
  color: #606266;
  text-align: center;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

.contentBox {
  margin-right: 5px;
}

.desc {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btnTitle {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.el-icon-loading {
  position: fixed;
  font-size: 50px;
  left: 50%;
  top: 50%;
  color: #ec4141;
}
</style>
